<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>comments</title>
		<meta name="viewport" content="width=device-width,   initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="assets/lib/font-awesome-4.7.0/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="assets/lib/bootstrap3.3.7/css/bootstrap.min.css" />
		<script src="assets/lib/bootstrap3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-pager.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="./css/comments.css" />
		<script>
			$(function() {

				$(".t3").on("click", function() {
					debugger
					var $t3 = $(this);
					var $form = $t3.closest("form");
					var $box = $t3.prev(".box");
					var $temp = $box.clone(true);
					$t3.before($temp);
					$temp.find(".t1").val(Math.ceil(Math.random() * 10));
					$temp.find(".t2").text(Math.ceil(Math.random() * 10));
					
					console.info($temp.prop("outerHTML"));
				})

				$("a.replay").on("click", function() {

					var className = "relation-replay";
					var $replayBtn = $(this);
					debugger;
					var $commentsForm = $replayBtn.closest(".comments-sub-item,.comments-item").children("." + className);
					if ($commentsForm.length == 0) {
						$commentsForm = $("#main-comment").clone(true).attr("id", "");
						$commentsForm.addClass(className);
						$replayBtn.closest(".comments-sub-item,.comments-item").children(".clearfix").after($commentsForm);
						$replayBtn.text("收起")
					} else {
						$commentsForm.toggle("fast", "linear", function() {
							$commentsForm.find("textarea").val("");
							$replayBtn.text("收起" == $replayBtn.text() ? "回复" : "收起")
						})
					}

				});
			});
		</script>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<form>
					<div class="box">
						<div>
							<input class="t1" value="123" />
							<span class="t2">aa</span>
						</div>
						<hr />
					</div>
					<button class="t3">t3</button>

				</form>

			</div>
			<div class="row">

			</div>

			<div class="row">

				<hr />
				<div class="col-md-1"></div>
				<div class="col-md-10">

					<div class="comments-form" id="main-comment">
						<div class="comments-form-left">
							<!-- <img class="img-circle" src="assets/1.png" /> -->
							 <img class="img-circle" src="assets/1.png" />
							<div class="text-primary">狂徒张三</div>
						</div>
						<div class="comments-form-right">
							<textarea autoheight="true" placeholder="请输入你的留言..."></textarea>
							<div class="comments-form-right-footer">
								<button class="btn btn-info btn-xs">提交评论</button>
							</div>
						</div>
						<div class="clearfix"></div>
					</div>

					<hr />
					<div class="comments-box">
						<div class="comments-item">
							<div class="comments-item-left">
								<img class="img-circle" src="assets/1.png" />
							</div>
							<div class="comments-item-right">
								<div class="comments-item-right-header"><strong>张三</strong><i class="fa fa-comment-o" aria-hidden="true"></i><span>2012-12-12</span></div>
								<div class="comments-item-right-content">
									<p>asdasdasdas</p>
								</div>
								<div class="comments-item-right-footer">
									<a class="btn-link btn-xs replay">回复</a>
								</div>
							</div>
							<div class="clearfix"></div>
							<div class="comments-sub-box">
								<!-- 评论回复 列表 -->
								<div class="comments-sub-item">
									<div class="comments-item-left">
										<img class="img-circle" src="assets/1.png" />
									</div>
									<div class="comments-item-right">
										<div class="comments-item-right-header">
											<strong class="text-info">张三</strong><small class="text-muted" style="margin:auto 5px;">发表于</small><span>2012-12-12</span>
										</div>
										<div class="comments-item-right-content">
											<p>asdasdasdas</p>
										</div>
										<div class="comments-item-right-footer">
											<a class="btn-link btn-xs replay">回复</a>
										</div>
									</div>
									<div class="clearfix"></div>
								</div>

								<div class="comments-sub-item">
									<div class="comments-item-left">
										<img class="img-circle" src="assets/1.png" />
									</div>
									<div class="comments-item-right">
										<div class="comments-item-right-header">
											<strong class="text-danger">张三</strong><small class="text-muted" style="margin:auto 5px;">发表于</small><span
											 class="text-small">2012-12-12 001</span>
										</div>
										<div class="comments-item-right-content">
											<p>asdasdasdas</p>
										</div>
										<div class="comments-item-right-footer">
											<a class="btn-link btn-xs replay">回复</a>
										</div>
									</div>
									<div class="clearfix"></div>
								</div>

								<div class="load-more">加载更多</div>
							</div>
						</div>


						<div class="comments-item">
							<div class="comments-item-left">
								<img class="img-circle" src="assets/avatar.jpg" />
							</div>
							<div class="comments-item-right">
								<div class="comments-item-right-header"><strong>张三</strong><span>2012-12-12</span></div>
								<div class="comments-item-right-content">
									<p>asdasdasdas</p>
								</div>
								<div class="comments-item-right-footer">
									<a class="btn-link btn-xs replay">回复</a>
								</div>
							</div>
							<div class="clearfix"></div>

						</div>

					</div>

				</div>
				<div class="col-md-1"></div>
			</div>

		</div>
	</body>
</html>
